<template>
    <div>
        <Tree :data="data5" :render="renderContent"></Tree>
        <!-- <ButtonGroup style="margin:10px 10px">
			<Button type="success" @click="add">
				新增
			</Button>
			<Button type="warning" @click="updata">
				修改
			</Button>
			<Button type="error" @click="deleteClick">
				删除
			</Button>
		</ButtonGroup>
		<Table @on-selection-change="select" style="margin:0 10px;" :loading="loading" border ref="selection" :columns="columns4" :data="MsbdList"></Table>
		<Page :total="pageObj.total" style="margin:10px;" @on-change="jumpPage" />
		<Modal v-model="modal" title="新增" @on-ok="saveBtn">
			<Form :model="formItem" :label-width="80">
				<FormItem label="类名">
					<Input v-model="formItem.name" placeholder="请输入类名..." />
				</FormItem>
			</Form>
		</Modal> -->
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers("Types");
 export default {
        data () {
            return {
                title:'',
                value: '',
                data5: [
                    {
                        title: 'parent 1',
                        expand: true,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-folder-outline'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                                    h('span', data.title)
                                ]),
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        float: 'right',
                                        marginRight: '32px'
                                    }
                                }, [
                                    h('Button', {
                                        props: Object.assign({}, this.buttonProps, {
                                            icon: 'ios-add',
                                            type: 'primary'
                                        }),
                                        style: {
                                            width: '64px'
                                        },
                                        on: {
                                            click: () => { this.append(data) }
                                        }
                                    })
                                ])
                            ]);
                        },
                        children: [{
	id: 1,
	title: "宣传彩页",
	children: [{
	id: 11,
	title: "宣传单页",
	children: [{
		id: 111,
		title: "自定义尺寸"
	}, {
		id: 112,
		title: "A5尺寸"
	}, {
		id: 113,
		title: "A4尺寸"
	}, {
		id: 114,
		title: "A3尺寸"
	}]
	}, {
			id: 12,
	title: "对折页",
	children: [{
		id: 121,
		title: "A4尺寸"
	}, {
		id: 122,
		title: "A3尺寸"
	}]
	}, {
	id: 13,
	title: "封套",
	}, {
	id: 14,
	title: "抽奖券",
	}]
}, {
	id: 2,
	title: "画册系列",
	children: [{
	id: 21,
	title: "形象画册",
	children: [{
		id: 211,
		title: "宣传画册"
	}, {
		id: 212,
		title: "形象画册"
	}]
	}, {
	id: 22,
	title: "产品画册",
	children: [{
		id: 221,
		title: "产品展示画册"
	}, {
		id: 222,
		title: "产品销售画册"
	}, {
		id: 223,
		title: "产品推荐画册"
	}]
	}, {
	id: 23,
	title: "说明书",
	children: [{
		id: 231,
		title: "胶印纸"
	}, {
		id: 232,
		title: "铜板"
	}, {
		id: 233,
		title: "精装"
	}]
	}, {
	id: 24,
	title: "精刊杂志",
	}, {
	id: 25,
	title: "菜谱系列",
	}, {
	id: 26,
	title: "家谱",
	}]
}, {
	id: 3,
	title: "名片证卡",
	children: [{
	id: 31,
	title: "各种印刷",
	children: [{
		id: 311,
		title: "特种纸"
	}, {
		id: 312,
		title: "铜版纸"
	}]
	}, {
	id: 32,
	title: "PVC名片",
	children: [{
		id: 321,
		title: "透明PVC"
	}, {
		id: 322,
		title: "磨砂哑光"
	}, {
		id: 323,
		title: "磨砂亮光"
	}, {
		id: 324,
		title: "亮光PVC"
	}, {
		id: 325,
		title: "哑光PVC"
	}]
	}, {
	id: 33,
	title: "刮刮卡",
	children: [{
		id: 331,
		title: "PVC材质"
	}, {
		id: 332,
		title: "特种纸"
	}, {
		id: 333,
		title: "铜版纸"
	}]
	}, {
	id: 34,
	title: "挪车牌",
	}, {
	id: 35,
	title: "工作证",
	}, {
	id: 36,
	title: "贺卡",
	}]
},
{
	id: 4,
	title: "会员卡系列",
	children: [{
	id: 41,
	title: "快印会员卡",
	}, {
	id: 42,
	title: "无磁条会员卡",
	}, {
	id: 43,
	title: "带磁条会员卡",
	}]
}, {
	id: 5,
	title: '手提袋系列',
	children: [{
			id: 51,
			title: '塑料袋'
},
{
	id: 52,
	title: '环保袋'
},
{
	id: 53,
	title: '牛皮纸'
},
{
	id: 54,
	title: '特种纸'
},
{
	id: 55,
	title: '白卡纸'
},]
},{
	id: 6,
	title: '不干胶系列',
	children: [{
		id: 61,
		title: '异形不干胶'
	},
	{
		id: 62,
		title: '规则不干胶'
	}
	]
},
{
	id: 7,
	title: '办公印刷品',
	children: [{
			id: 71,
			title: '笔记本',
			children: [{
					id: 711,
					title: '定制笔记本'
				},
				{
					id: 712,
					title: '会议笔记本'
				},
				{
					id: 713,
					title: '学生笔记本'
				}
			]
		},
		{
			id: 72,
			title: '广告纸杯'
		},
		{
			id: 73,
			title: '档案袋',
			children: [{
					id: 731,
					title: '其他材质'
				},
				{
					id: 732,
					title: '白卡纸'
				},
				{
					id: 733,
					title: '牛皮纸'
				}
			]
		}, {
			id: 74,
			title: '信封',
			children: [{
					id: 741,
					title: '铜版纸信封'
				},
				{
					id: 742,
					title: '牛皮纸信封'
				},
				{
					id: 743,
					title: '双胶纸信封'
				}
			]
		},
		{
			id: 75,
			title: '展架'
		}
	]
},
{
	id: 8,
	title: '纸巾/抽纸盒',
	children: [{
			id: 81,
			title: '抽纸'
},
{
	id: 82,
	title: '纸夹纸巾'
}
	]
}
]
                    }
                ],
                
                buttonProps: {
                    type: 'default',
                    size: 'small',
                }
            }
        },
        methods: {
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-add'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.append(data) }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-remove'
                            }),
                            on: {
                                click: () => { this.remove(root, node, data) }
                            }
                        })
                    ])
                ]);
            },
            // append (data) {
               
            // },
            remove (root, node, data) {
                const parentKey = root.find(el => el === node).parent;
                const parent = root.find(el => el.nodeKey === parentKey).node;
                const index = parent.children.indexOf(data);
                parent.children.splice(index, 1);
                console.log(data)
            },
            append (data) {
                this.title=prompt('请输入标题内容')
                if(this.title){
                    const children = data.children || [];
                children.push({
                    title: this.title,
                    expand: true
                });
                this.$set(data, 'children', children);
                }
            }
        }
    }
</script>

<style>

</style>
